<template>
    <div>
        <el-row> 
           <div class="top" v-if="Moder.control == undefined">
                <p class="title">资产基本信息</p>
                <el-button type="primary" @click="$router.go(-1)">返回</el-button>
            </div>
            <p class="title" style="margin-top:5px" v-if="Moder.control">资产基本信息</p>
            <el-descriptions class="margin-top" :column="3"  border>
            <el-descriptions-item label="资产名称">{{ Moder.DeviceName }}</el-descriptions-item>
            <el-descriptions-item label="资产唯一编码">{{ Moder.DeviceID }}</el-descriptions-item>
            <el-descriptions-item label="从属部门">{{ Moder.Department }}</el-descriptions-item>
            <el-descriptions-item label="操作系统">{{ Moder.DeviceClass }}</el-descriptions-item>
            <el-descriptions-item label="资产类型">{{ Moder.DeviceType }}</el-descriptions-item>
            <el-descriptions-item label="使用教室">{{ Moder.ClassName }}</el-descriptions-item>
            <el-descriptions-item label="资产备注">{{ Moder.UseName }}</el-descriptions-item>
            <el-descriptions-item label="使用者角色">{{ Moder.Role }}</el-descriptions-item>
            <el-descriptions-item label="硬件唯一编码">{{ Moder.HardID }}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ Moder.Phone }}</el-descriptions-item>
            <el-descriptions-item label="开始使用日期">{{ Moder.StartDate }}</el-descriptions-item> 
            <el-descriptions-item label="创建时间">{{ Moder.CreateTime }}</el-descriptions-item> 
            <el-descriptions-item label="描述">{{ Moder.Descp }}</el-descriptions-item>
            </el-descriptions>
        </el-row>
        <el-row>
            <p class="title">资产基本信息</p>
            <el-descriptions  style="margin-top:15px" :column="3" border>
            <el-descriptions-item label="安全总结">
                <span :style="{color: Moder.SecurityStatus === 1 ? '#67C23A' : '#F56C6C'}">{{Moder.SecurityStatus === 1 ? '正常' : '异常'}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="绿盟零信任运行状态">
                <span :style="{color: Moder.IsTrustCyberRun === 1 ? '#67C23A' : '#F56C6C'}">{{Moder.IsTrustCyberRun === 1 ? '正常' : '异常'}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="绿盟零信任客户端版本">{{ Moder.TrustCyberVer }}</el-descriptions-item>
            <el-descriptions-item label="金山杀软运行状态">
                <span :style="{color: Moder.IsKingSoftAVRun === 1 ? '#67C23A' : '#F56C6C'}">{{Moder.IsKingSoftAVRun === 1 ? '正常' : '异常'}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="金山杀软客户端版本">{{ Moder.KingSoftAVClientVer }}</el-descriptions-item>
            <el-descriptions-item label="金山杀软病毒库版本">{{ Moder.KingSoftAVDBVer }}</el-descriptions-item>
            </el-descriptions>
        </el-row>
        <el-row>
            <p class="title">资产动态信息</p>
            <el-descriptions style="margin-top:15px" :column="3" border>
            <el-descriptions-item label="资产状态">
                <span>
                <span style="color:#67C23A" v-if="Moder.Status === 1" type="success">在线</span>
                <span style="color:#F56C6C" v-if="Moder.Status !== 1" type="danger">离线</span>
                </span> 
            </el-descriptions-item>
            <el-descriptions-item label="资产时钟状态">
                <span v-if="Moder.Status !== 1"></span>
                <span v-else>
                <span style="color:#67C23A" v-if="Moder.Statusassert < 6000" type="success">正常</span>
                <span style="color:#F56C6C" v-else type="danger">异常</span>
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="最近性能上送时间">
                <span v-if="Moder.LastReportStatusTime">{{ Moder.Status_Time }}</span>
                <span v-else>初始化</span>
            </el-descriptions-item>
            <el-descriptions-item label="最近上下线时间" >
                <span v-if="Moder.LastReportStatusTime&&Moder.StatusChangeTime&&Moder.StatusChangeTime_redo">
                {{ Moder.StatusChangeTime_redo }}
                </span> 
            </el-descriptions-item>
            <el-descriptions-item label="最近握手心跳时间" >
                <span v-if="Moder.LastEchoTime">
                {{ Moder.LastEchoTime }}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="持续运行时长">{{ Moder.KeepRunningTime }}</el-descriptions-item>
            <el-descriptions-item label="设备软件版本">{{ Moder.Version }}</el-descriptions-item>
            <el-descriptions-item label="设备mac"><span>{{ Moder.Mac }}</span></el-descriptions-item>
            <el-descriptions-item label="登录账号">{{ Moder.Account }}</el-descriptions-item>
            <el-descriptions-item label="计算机名称">{{ Moder.ComputerName }}</el-descriptions-item>
            <el-descriptions-item label="资产IP">{{ Moder.DeviceIP }}</el-descriptions-item> 
            <el-descriptions-item label="资产通讯"><span>{{ Moder.ChannelID }}</span></el-descriptions-item>
            <el-descriptions-item label="CPU使用率" :span="2">
                <div style="width:80%">
                    <el-progress :stroke-width="10" :percentage="Moder.CPUUsedPert" /> 
                </div>
            </el-descriptions-item>
            <el-descriptions-item label="操作系统">{{ Moder.OsInfo }}</el-descriptions-item>
            
            
            <el-descriptions-item label="系统磁盘使用率" :span="2">
                <div style="display: flex; align-items: center;justify-content: space-between;">
                <div style="width:80%">
                    <el-progress :stroke-width="10" :percentage="Moder.DiskUsedPct"/> 
                </div>
                <span style="white-space: nowrap;">{{ Moder.DiskUsed }}<span v-if= Moder.DiskUsed>/</span>{{ Moder.DiskTotal }}</span>
                </div>
            </el-descriptions-item>
            <el-descriptions-item label="操作系统激活状态">
                <span>
                    <span style="color:#67C23A" v-if="Moder.OsActive == 'Activated'" type="success">激活</span>
                    <span style="color:#F56C6C" v-else type="danger">未激活</span>
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="扩展磁盘使用率" :span="2">
                <div style="display: flex; align-items: center;justify;justify-content: space-between;">
                <div style="width:80%">
                    <el-progress :stroke-width="10" :percentage="Moder.DiskSoftPct" /> 
                </div>
                <span style="white-space: nowrap;">{{ Moder.DiskSoftUsed }}<span v-if= Moder.DiskSoftUsed>/</span>{{ Moder.DiskSoftTotal }}</span>
                </div>
            </el-descriptions-item>
                <el-descriptions-item label="操作系统授权码"><span>{{ Moder.OsCode }}</span></el-descriptions-item>
            
            
            </el-descriptions>
        </el-row>

    </div>
</template>

<script>
import { formatDuration, parseTime,  formatBytes_back,formatTime2 } from '@/utils/index'

export default {
    data() {
        return {};
    },
    props: {
        Moder:{
            type: Object,
            default: function () {
                return {}
            }
        }
    },
    watch: {
        Moder: { 
            deep: true,
            handler(val,old) {
                // console.log(val);
                this.handleData();
            }
        }
    },
    mounted(){
        this.handleData();
    },
    methods:{
        handleData(){
            let Moder = this.Moder
            const currentTimeStamp = new Date().getTime();
            if(!isNaN(Moder.KeepRunningTime))
                this.Moder.KeepRunningTime = formatDuration(Moder.KeepRunningTime)
            // this.Moder.onlineTotal  = Moder.OnlineDeviceCount +Moder.OfflineDeviceCount
            this.Moder.Status_Time = parseTime(Moder.LastReportStatusTime)
            // if(Moder.StatusChangeTime_redo != undefined)
            this.Moder.StatusChangeTime_redo = parseTime(this.Moder.StatusChangeTime)
            // this.Moder.StatusChangeTime_redo =currentTimeStamp/1000 > Moder.StatusChangeTime &&Moder.StatusChangeTime !=0 ? formatDuration(currentTimeStamp/1000 - Moder.StatusChangeTime):0
            this.Moder.Statusassert = currentTimeStamp/1000 - Moder.DeviceTime
            if(!isNaN(Moder.CreateTime))
                this.Moder.CreateTime = parseTime(Moder.CreateTime)
            if(!isNaN(Moder.StartDate))
                this.Moder.StartDate = parseTime(Moder.StartDate)
            if(!isNaN(Moder.LastEchoTime))
                this.Moder.LastEchoTime = parseTime(Moder.LastEchoTime)
            this.Moder.DiskUsedPct = !Moder.Disk_Sys_Total? 0: ((Moder.Disk_Sys_Used / Moder.Disk_Sys_Total) * 100).toFixed(1) * 1
            this.Moder.DiskUsed = formatBytes_back(Moder.Disk_Sys_Used)
            this.Moder.DiskTotal = formatBytes_back(Moder.Disk_Sys_Total)
            this.Moder.MemUsedPct = !Moder.Memeory_Total?0:((Moder.Memeory_Used / Moder.Memeory_Total) * 100).toFixed(1) * 1
            this.Moder.DiskSoftPct = !Moder.Disk_Ext_Total?0:((Moder.Disk_Ext_Used / Moder.Disk_Ext_Total) * 100).toFixed(1) * 1
            this.Moder.DiskSoftUsed = formatBytes_back(Moder.Disk_Ext_Used)
            this.Moder.DiskSoftTotal = formatBytes_back(Moder.Disk_Ext_Total)
        },
    }

}
</script>
<style lang="scss" scoped>
.top{
    display: flex;
    justify-content: space-between;
    align-content: center;
    .el-button{
        margin-bottom: 10px;
    }
}
::v-deep .el-progress-bar {
  width: 70%; /* 设置进度条的宽度 */
  /* 添加其他样式属性 */
}
::v-deep .el-descriptions-item__label.is-bordered-label{
  width: 200px;
}
</style>